import React, { useState } from 'react';
import { useLocation } from 'react-router-dom';
import QueryString from 'qs';
import Header from '../../components/Header';
import axios from 'axios';
import './style.scss';
import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';
const OrderPay = () => {
  const [show, setShow] = useState(false);
  const location = useLocation();
  const history = useHistory();
  const searchParams = QueryString.parse(location.search.slice(1));
  const handlePay = () => {
    axios.get('/pay', { params: searchParams }).then((resp) => {
      setShow(true);
      window.open(resp.data.data);
      query();
    });
  };

  const query = async () => {
    const timer = setInterval(async () => {
      const resp = await axios.get('/pay/query', {
        params: { id: searchParams.id },
      });

      const { code, message } = resp.data;
      if (code === 200) {
        clearInterval();
        setShow(false);
        console.log('支付成功!!!!');
        history.push('/pay/success');
      } else {
      }
    }, 1000);
  };
  return (
    <div>
      <Header title="选择支付方式" />

      <ul style={{ padding: 20 }}>
        <li>
          <span>支付宝</span>
        </li>
      </ul>

      <div style={{ padding: '0 16px 20px 16px' }}>
        <button
          style={{
            background: 'skyblue',
            border: 0,
            width: '100%',
            height: 40,
            borderRadius: 6,
            color: '#fff',
          }}
          onClick={() => handlePay()}
        >
          立即支付
        </button>
      </div>

      <div className="loading" style={{ display: show ? 'flex' : 'none' }}>
        <ul className="loading-ul">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <h3>支付查询中...</h3>
      </div>
    </div>
  );
};

export default OrderPay;
